<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" 
    width="500" height="500" style="border:#aaa solid" >
        <g>
            <path d="M0 10 H100 M0 20 H100 M0 30 H100 M0 40 H100 M0 50 H100 M0 60 H100 M0 70 H100 M0 80 H100 M0 90 H100
                    M10 0 V100 M20 0 V100 M30 0 V100 M40 0 V100 M50 0 V100 M60 0 V100 M70 0 V100 M80 0 V100 M90 0 V100" 
            stroke="#aaa" stroke-width=".2" fill="none"/>
            <text x="0" y="3" font-size="3">0</text>
            <text x="8" y="3" font-size="3">10</text>
            <text x="18" y="3" font-size="3">20</text>
            <text x="28" y="3" font-size="3">30</text>
            <text x="38" y="3" font-size="3">40</text>
            <text x="48" y="3" font-size="3">50</text>
            <text x="58" y="3" font-size="3">60</text>
            <text x="68" y="3" font-size="3">70</text>
            <text x="78" y="3" font-size="3">80</text>
            <text x="88" y="3" font-size="3">90</text>
            <text y="11" x="0" font-size="3">10</text>
            <text y="21" x="0" font-size="3">20</text>
            <text y="31" x="0" font-size="3">30</text>
            <text y="41" x="0" font-size="3">40</text>
            <text y="51" x="0" font-size="3">50</text>
            <text y="61" x="0" font-size="3">60</text>
            <text y="71" x="0" font-size="3">70</text>
            <text y="81" x="0" font-size="3">80</text>
            <text y="91" x="0" font-size="3">90</text>
        </g>
        <!-- enter your code -->
        <line x1="10" y1="30"
            x2="80" y2="30"
            stroke="#888"
            stroke-width=".5"/>      
        <path d="M20 10V80M10 70H80"
            fill="none" stroke="#888" stroke-width="1" />
        <path d="M20 30A40 40 0 0 1 60 70"
            fill="none" stroke="#00f" stop-opacity=".8" stroke-width=".5" />
        
        <circle cx="20" cy="70" r="1" fill="#f00"/>
        
        
    </svg>
</body>
</html>
<script>
    const ns = 'http://www.w3.org/2000/svg' ;
    
    //以20,70为原点。以40为半径
    //画一个30度的弧线。找到30度的那个点
    //计算出两个直角边的长度
    //sin30 = h/r ;
    //h = sin30 * r ;
    //v = cos30 * r ;
    //计算点的横纵坐标
    //x = cx * h ;
    //y = cy - v ;
    //Math.sin(30度)  需要传递的不是30角度， 而是30角度对应的弧度
    //360角度=2PI弧度
    //1弧度 = 360角度/2PI = 180/PI
    //1角度 = PI/180 
    const x = 20 + Math.sin(30 * Math.PI / 180) * 40  ;
    const y = 70 - Math.cos(30 * Math.PI / 180) * 40 ;

    const c = document.createElementNS(ns,'circle');
    c.setAttribute('cx',x);
    c.setAttribute('cy',y);
    c.setAttribute('r',1);
    c.setAttribute('fill','red');
    document.querySelector('svg').appendChild(c);
</script>